<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>我的订阅</title>

<!-- Bootstrap -->
<link rel="stylesheet" href="<%=request.getContextPath() %>/css/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="<%=request.getContextPath() %>/css/bootstrap/font/font-awesome.min.css">
<link rel="stylesheet" href="<%=request.getContextPath() %>/css/bootstrap/switch/bootstrap-switch.css">
<link rel="stylesheet" href="<%=request.getContextPath() %>/css/common/common.css">
<link rel="stylesheet" href="<%=request.getContextPath() %>/css/easyui/easyui.css">

<!-- Stylesheets -->
<link rel="stylesheet" href="<%=request.getContextPath() %>/v2/global/css/bootstrap-extend.min.css">
<link rel="stylesheet" href="<%=request.getContextPath() %>/v2/assets/css/site.min.css">
<!-- Plugins -->
<!-- 校验,向导 -->
<link rel="stylesheet" href="<%=request.getContextPath() %>/v2/global/vendor/jquery-wizard/jquery-wizard.css">
<link rel="stylesheet" href="<%=request.getContextPath() %>/v2/global/vendor/formvalidation/formValidation.css">
<!-- select多选插件 -->
<link rel="stylesheet" href="<%=request.getContextPath() %>/v2/global/vendor/multi-select/multi-select.css">
<!-- form掩码 -->
  <link rel="stylesheet" href="<%=request.getContextPath() %>/v2/assets/examples/css/forms/masks.css">
<!-- Fonts -->
<!-- 网络图标 -->
<link rel="stylesheet" href="<%=request.getContextPath() %>/v2/global/fonts/web-icons/web-icons.min.css">
<script src="<%=request.getContextPath() %>/v2/global/vendor/breakpoints/breakpoints.js"></script>

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
<script>
Breakpoints();
</script>
<style type="text/css">

	.ms-container::before {
		top: 140px;
	}
	.ms-container {
			height: 300px;
			width: 580px;
	}
	.ms-container .ms-list {
			height: 265px;
	}
	.step-height{
			height: 300px
	}
</style>
</head>

<body class="my-bodyfix">
	<div class="container">
	<ul class="nav nav-tabs" role="tablist" id="myTab">
		<li class="active"><a href="#my_order_tab" role="tab" data-toggle="tab"  onclick="initQuery()">我的订阅</a></li>
		<li><a href="#order_tab" role="tab" data-toggle="tab" onclick="wizardInit()">新增订阅</a></li>
	</ul>
	<div class="tab-content">
		<div class="tab-pane active" id="my_order_tab">
			<div class="row">
				<div class="panel-heading">
					<h3 class="panel-title">我的订阅:</h3>
				</div>
				<div class="col-lg-12">
					<div class="col-lg-offset-9 col-md-offset-8 col-lg-3 col-md-4">
						<div class="form-group">
							<div class="input-group">
								<input type="text" id="bname" class="form-control" name="bname" placeholder="查询书名">
								<span class="input-group-btn">
									<button type="submit" class="btn btn-primary " data-toggle="tooltip" 
											data-placement="bottom"  title="查询" onclick="queryAll()">
										<i class="icon wb-search" aria-hidden="false"></i>
									</button>
									<button type="submit" class="btn btn-primary" data-toggle="tooltip" 
											data-placement="bottom"  title="重置" onclick="initQuery()">
										<i class="icon wb-reload" aria-hidden="true"></i>
									</button>
								</span>
							</div>
						</div>
					</div>
				</div>
				<div class="col-lg-12" style="height: 10px">
					
				</div>
			</div>
			<div class="row">
				<div class="col-lg-12">
					<div class="" style="width: 100%; height: 400px;">
						<table id="mybookes"></table>
					</div>
				</div>
			</div>
		</div>
		<div class="tab-pane" id="order_tab">
			<div class="row">
				<div class="col-md-12">
					<!-- Panel Wizard Form -->
					<div class="panel" id="exampleWizardForm">
						<div class="panel-heading">
							<h3 class="panel-title">订阅:</h3>
						</div>
						<div class="panel-body">
							<!-- Steps -->
							<div class="steps steps-sm row" data-plugin="matchHeight"
								data-by-row="true" role="tablist">
								<div class="step col-md-4 current" data-target="#step1"
									role="tab">
									<span class="step-number">1</span>
									<div class="step-desc">
										<span class="step-title">增加方式</span>
										<p>可以从已收录书籍选取或者自定义增加新的书籍</p>
									</div>
								</div>
								<div class="step col-md-4" data-target="#step2"
									role="tab">
									<span class="step-number">2</span>
									<div class="step-desc">
										<span class="step-title">书籍信息</span>
										<p>选择新增的书籍</p>
									</div>
								</div>
								<div class="step col-md-4" data-target="#step3"
									role="tab">
									<span class="step-number">3</span>
									<div class="step-desc">
										<span class="step-title">完成</span>
										<p>完成</p>
									</div>
								</div>
							</div>
							<!-- End Steps -->
							<!-- Wizard Content -->
							<div class="wizard-content">
								<div class="wizard-pane active" id="step1" role="tabpanel">
									<div class="control-group step-height">
										<label class="control-label" for="notification1">选择增加方式:</label>
										<div class="controls">
											<div class="switch">
												<input id="addType" type="checkbox" checked data-on-text="书库" data-off-text="自定义"/>
											</div>
										</div>
									</div>
								</div>
								<div class="wizard-pane" id="step2" role="tabpanel">
									<div class="row" id="step2_1">
										<div class="col-md-6 col-md-offset-3" >
											<select id='books-select' class="searchable" multiple='multiple'>
												
											</select>
										</div>
									</div>
									<div class="row" id="step2_2">
										<form id="customUrl" class="col-md-4 col-md-offset-4" >
<!-- 											<div class="form-group"> -->
<!-- 												<label class="col-sm-3 control-label">Phone2</label> -->
<!-- 												<div class="col-sm-9"> -->
<!-- 													<input type="text" class="form-control" id="inputPhone2" -->
<!-- 														data-plugin="formatter" data-pattern="http://www.biquge.tw/[[]]" /> -->
<!-- 													<p class="help-block">81_81260/</p> -->
<!-- 												</div> -->
<!-- 											</div> -->
											<div class="form-group">
												<label class="control-label" for="webname">站点</label>
												<select class="form-control" id="webname" name="webname">
													<option value="1">笔趣阁</option>
												</select>
											</div>
											<div class="form-group">
												<label class="control-label" for="newbookname">书名</label>
												<input type="text" class="form-control" id="newbookname" name="newbookname" required="required">
											</div>
											<div class="form-group">
												<label class="control-label" for="weburl">网址URL</label>
												<input type="text" class="form-control" id="weburl" name="weburl" required="required">
											</div>
										</form>
									</div>
								</div>
								<div class="wizard-pane" id="step3" role="tabpanel">
									<div class="text-center margin-vertical-20 step-height">
										<i class="icon wb-check font-size-40" aria-hidden="true"></i>
										<h4>添加成功!</h4>
									</div>
								</div>
							</div>
							<!-- End Wizard Content -->
						</div>
					</div>
					<!-- End Panel Wizard One Form -->
				</div>
			</div>
		</div>
	</div>
	
	
	</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="<%=request.getContextPath() %>/js/easyui/jquery.easyui.min.js"></script>
<script src="<%=request.getContextPath() %>/js/bootstrap/bootstrap.min.js"></script>
<script src="<%=request.getContextPath() %>/js/bootstrap/switch/bootstrap-switch.min.js"></script>
<script src="<%=request.getContextPath() %>/js/common/jutil.js"></script>
<script src="<%=request.getContextPath() %>/js/jquery/quicksearch.js"></script>
<!-- ----------------Plugins -------->
<!-- 动画效果 form掩码 -->
<script src="<%=request.getContextPath() %>/v2/global/vendor/animsition/animsition.js"></script>
<script src="<%=request.getContextPath() %>/v2/global/vendor/formatter-js/jquery.formatter.js"></script>
<!-- 校验 -->
<script src="<%=request.getContextPath() %>/v2/global/vendor/formvalidation/formValidation.js"></script>
<script src="<%=request.getContextPath() %>/v2/global/vendor/formvalidation/framework/bootstrap.js"></script>
<!-- 向导 -->
<script src="<%=request.getContextPath() %>/v2/global/vendor/jquery-wizard/jquery-wizard.js"></script>
<!-- select多选插件 -->
<script src="<%=request.getContextPath() %>/v2/global/vendor/multi-select/jquery.multi-select.js"></script>
<!-- ----------------Plugins end-------->
<!-- Scripts -->
<script src="<%=request.getContextPath() %>/v2/global/js/core.js"></script>
<script src="<%=request.getContextPath() %>/v2/assets/js/site.js"></script>
<script src="<%=request.getContextPath() %>/v2/assets/js/sections/menubar.js"></script>

<script src="<%=request.getContextPath() %>/v2/global/js/components/jquery-wizard.js"></script>
<script src="<%=request.getContextPath() %>/v2/global/js/components/matchheight.js"></script>
<!-- form掩码 -->
<script src="<%=request.getContextPath() %>/v2/global/js/components/animsition.js"></script>
<script src="<%=request.getContextPath() %>/v2/global/js/components/formatter-js.js"></script>
<%-- <script src="<%=request.getContextPath() %>/v2/assets/examples/js/forms/wizard.js"></script> --%>

<script type="text/javascript">
var wizard ;
(function(document, window, $) {
    'use strict';
    var Site = window.Site;
    $(document).ready(function() {
      Site.run();
    });
  })(document, window, jQuery);
	jQuery(function(){
		var Site = window.Site;
		
		//渲染开关组件
		$("input[type=\"checkbox\"], input[type=\"radio\"]").not("[data-switch-no-init]").bootstrapSwitch();
		//渲染tooltip
		$("[data-toggle='tooltip']").tooltip(); 
		$('#mybookes').datagrid({
			url:jutil.ctxPath +'/book/query_my_books.action',
			fitColumns:true,
			method:'post',
			loadMsg:'查询中，请等候。。。。',
			striped:true,
			fit:true,
			fitColumns:true,
			rownumbers:true,
			pagination:true,
			pageSize:10,
			pageList:[5,10,20,30,50],
			showFooter:true,
			singleSelect:true,
			queryParams: {
				bname:$("#bname").val()
			},
			columns:[[
			{field:'bookName',title:'书名',width:20,align:'center'},
			{field:'chapter',title:'最新章节',width:20,align:'center',formatter:function(value,row,index){
				if(value){
					return value;
				}else{
					return "抓取中..."
				}
			}},
			{field:'updaeTime',title:'最近更新日期',width:20,align:'center'},
			{field:'webName',title:'站点',width:20,align:'center',formatter:function(value,row,index){
					return '<a href="#" onclick="goToThis(\''+row.url+'\')" title="跳转至该网站">'+row.webName+'</a>';
				}
			},
			{field:'id',title:'操作',width:20,align:'center',formatter:function(value,row,index){
						return '<a href="#" onclick = cancelOrder(\''+row.id+'\')>取消订阅</a>';
				}
			}
			]]
		})
		
	})
	//打开网页
	function goToThis(url){
		window.open(url); 
	}
	//查询所有符合条件的
	function queryAll(){
		$('#mybookes').datagrid("reload",{
			bname:$("#bname").val()
		})
	}
	function initQuery(){
		$("#bname").val("");
		queryAll()
	}
	//订阅
	function order(id){
		jutil.ajax({
			url:"/book/order.action",
			data:{
				id:id
			},
			success:function(data){
				
				if(data.result){
					alert("订阅成功!");
				}else{
					alert("已经订阅!");
				}
				queryAll();
			}
		})
	}
	//取消订阅
	function cancelOrder(id){
		jutil.ajax({
			url:"/book/cancel_order.action",
			data:{
				id:id
			},
			success:function(data){
				
				queryAll();
			}
		})
	}
	//自定义校验 
	(function($) {
		// http://www.biquge.tw/81_81260/
		FormValidation.Validator.url_1 = {
			validate:function(validator, $field, options) {
				var url = $field.val();
				if (url ==='') {
					return true;
				}
				pre_url = url.substring(0,url.indexOf('tw')+2)
				suf_url = url.substring(url.indexOf('tw')+2)
				if(pre_url != "http://www.biquge.tw"){
					return false;
				}
				
				var reg = /^(\/)(\d{1,5})(_)(\d{1,10})(\/)$/;
				var re = new RegExp(reg);
				if(!re.test(suf_url)){
					return false;
				}
				return true;
			}
		};
	}(window.jQuery));
	
	(function() {
		// set up formvalidation
		$("#customUrl").formValidation({
			framework : 'bootstrap',
			fields : {
				weburl : {
					validators: {
						url_1: {
							message: '无效的网址,例:http://www.biquge.tw/81_1/'
						},
						notEmpty : {
							message : '不能为空!'
						},
						stringLength : {
							min : 1,
							max : 50,
							message : '长度不能超过50'
						}
					}
				},
				newbookname:{
					validators: {
						notEmpty : {
							message : '不能为空!'
						},
						stringLength : {
							min : 1,
							max : 20,
							message : '长度不能超过20'
						}
					}
				}
			}
		});

		// 初始化向导
		var defaults = $.components.getDefaults("wizard");
		var options = $.extend(true, {}, defaults, {
			buttonsAppendTo : '.panel-body'
		});

		wizard = $("#exampleWizardForm").wizard(options).data('wizard');
		
		// setup validator
		// http://formvalidation.io/api/#is-valid
		wizard.get("#step1").setValidator(function() {
			
			if($('#addType').is(':checked')){
				$("#step2_1").show();
				$("#step2_2").hide();
				
				//书库选取 
				jutil.ajax({
					url:'/book/query_all_books.action',
					data:{	page:1,
							rows:1000
						},
					success:function(data){
						if(data.total>0){
							var rows = data.rows;
							var options = "";
							$("#books-select").html('');
							for(var i in rows){
								
								if(rows[i].bid){
									options += "<option value='"+rows[i].id+"' selected >"+rows[i].bookName+"</option>";
								}else{
									options += "<option value='"+rows[i].id+"'>"+rows[i].bookName+"</option>";
								}
							}
							$(options).appendTo('#books-select');
							$('#books-select').multiSelect({
								selectableHeader: "<input type='text' class='search-input' autocomplete='off' placeholder='搜索书名'>",
								selectionHeader: "<input type='text' class='search-input' autocomplete='off' placeholder='搜索书名'>",
								afterInit: function(ms){
								var that = this,
								$selectableSearch = that.$selectableUl.prev(),
								$selectionSearch = that.$selectionUl.prev(),
								selectableSearchString = '#'+that.$container.attr('id')+' .ms-elem-selectable:not(.ms-selected)',
								selectionSearchString = '#'+that.$container.attr('id')+' .ms-elem-selection.ms-selected';
								
								that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
								.on('keydown', function(e){
									if (e.which === 40){
										that.$selectableUl.focus();
										return false;
									}
								});
								
								that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
								.on('keydown', function(e){
									if (e.which == 40){
										that.$selectionUl.focus();
										return false;
									}
								});
								},
								afterSelect: function(){
								  this.qs1.cache();
								  this.qs2.cache();
								},
								afterDeselect: function(){
								  this.qs1.cache();
								  this.qs2.cache();
								}
							});
						}
						
					}
				})
			}else{
				//自定义
				$("#step2_1").hide();
				$("#step2_2").show();
			}
			return true;
		});

		wizard.get("#step2").setValidator(function() {
			if($("#customUrl")){
				var fv = $("#customUrl").data('formValidation');
				fv.validate();
				if (!fv.isValid()) {
					return false;
				}	
			}
			
			if($('#addType').is(':checked')){
				
				if($("#books-select").val()){
					jutil.ajax({
						url:'/book/order_old.action',
						data:{
								ids : $("#books-select").val().join(",")
							},
						success:function(data){
							
						}
					})
				}else{
					
					return false;
				}
			}else{
				jutil.ajax({
					url:'/book/order_new.action',
					data:{
						newbookname : $("#newbookname").val(),
						url : $("#weburl").val(),
						webId : $("#webname").val()
						},
					success:function(data){
						
					}
				})
			}
			return true;
		});
		wizard.get("#step3").setValidator(function() {
			$('#myTab a:first').tab('show') 
			initQuery();
			return true;
		});
	})();
	//初始化向导
	function wizardInit(){
		wizard.first();
		//$(".steps-sm .step:first").tab('show');
	}
</script>
</body>

</html>
